<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  window.external.upload = function (state) {
    console.log(state);
  }

  let plugin = (function () {
    let plugin = document.createElement("embed");
    plugin.style.display = "none";

    plugin.type = "application/txftn-webkit";

    plugin.sign = function () {
      console.log("开始扫描文件");
    };

    plugin.pause = function () {
      console.log("暂停文件上传");
    };

    plugin.uploading = function () {
      console.log("开始文件上传");
    };

    plugin.del = function () {
      console.log("删除文件上传");
    };

    plugin.done = function () {
      console.log("文件上传完成");
    };

    document.body.appendChild(plugin);
    return plugin;
  })();

  let Upload = function (fileName) {
    this.plugin = plugin;
    this.fileName = fileName;
    this.button1 = null;
    this.button2 = null;
    this.state = 'sign';
  }

  Upload.prototype.init = function () {
    let that = this;
    this.dom = document.createElement("div");
    this.dom.innerHTML =
      `<span>文件名称: ${this.fileName}</span><button data-action="button1">扫描中</button><button data-action="button2">删除</button>`;

    document.body.appendChild(this.dom);
    this.button1 = this.dom.querySelector('[data-action="button1"]');
    this.button2 = this.dom.querySelector('[data-action="button2"]');
    this.bindEvent();
  }

  Upload.prototype.bindEvent = function () {
    let self = this;
    this.button1.onclick = function () {
      if (self.state === "sign") {
        console.log("扫描中，点击无效……");
      } else if (self.state === "uploading") {
        self.changeState("pause");
      } else if (self.state === "pause") {
        self.changeState("uploading");
      } else if (self.state === "done") {
        console.log("文件已上传完成，点击无效");
      } else if (self.state === "error") {
        console.log("文件上传失败，点击无效");
      }
    };

    this.button2.onclick = function () {
      if (self.state === "done" || self.state === "error" || self.state === "pause") {
        self.changeState("del");
      } else if (self.state === "sign") {
        console.log("文件正在扫描中，不能删除");
      } else if (self.state === "uploading") {
        console.log("文件正在上传中，不能删除");
      }
    }
  }

  Upload.prototype.changeState = function (state) {
    switch (state) {
      case "sign":
        this.plugin.sign();
        this.button1.innerHTML = "扫描中，任何操作无效";
        break;
      case "uploading":
        this.plugin.uploading();
        this.button1.innerHTML = "正在上传，点击暂停";
        break;
      case "pause":
        this.plugin.pause();
        this.button1.innerHTML = "已暂停，点击重新上传";
        break;
      case "done":
        this.plugin.done();
        this.button1.innerHTML = "上传完成";
        break;
      case "error":
        this.button1.innerHTML = "上传失败";
        break;
      case "del":
        this.plugin.del();
        this.dom.parentNode.removeChild(this.dom);
        console.log("删除完成");
        break;
    }
    this.state = state;
  }

  let uploadObj = new Upload("《hello world》");
  uploadObj.init();

  window.external.upload = function (state) {
    uploadObj.changeState(state);
  }

  window.external.upload("sign");

  setTimeout(function () {
    window.external.upload("uploading");
  }, 1000);

  setTimeout(function () {
    window.external.upload("done");
  }, 5000);
</script>

</html>